<template>
  <div>
      <table class="foot-table">
      <tbody>
        <tr style="font-size: 16px; color: #666566">
          <td>编号</td>
          <td>单号</td>
          <td>标题</td>
          <td>报警时间</td>
          <td>案发地址</td>
          <td>接警员</td>
          <td>被派警员</td>
          <td>状态</td>
          <td>操作</td>
          <td>反馈内容</td>
        </tr>
        <tr v-for="(item, index) in traffic" :key="index">
          <td>{{ index+1 }}</td>
          <td>{{ item.alarmNumber }}</td>
          <td>{{ item.alarmTitle }}</td>
          <td>{{ item.alarmDate }}</td>
          <td>{{ item.load }}</td>
          <td>{{ item.alarmMan }}</td>
          <td>{{ item.byAlarmMan }}</td>
          <td>
              <i style="color: #1fbe1c; font-size:18px; font-weight:bold;" class="el-icon-warning-outline"></i>
              {{ item.isHandle }}
          </td>
          <td>查看</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      traffic: [
        {
          alarmNumber: "20061118225464445",
          alarmTitle: "延安高架多车连环相撞",
          alarmDate: "2019.10.10-2019.11.18",
          load: "上海浦东新区666号",
          alarmMan: "接警员1",
          byAlarmMan: "201411041",
          isHandle: "已处理",
        },
        {
          alarmNumber: "20061118225464445",
          alarmTitle: "延安高架多车连环相撞",
          alarmDate: "2019.10.10-2019.11.18",
          load: "上海浦东新区666号",
          alarmMan: "接警员1",
          byAlarmMan: "201411041",
          isHandle: "已处理",
        },
        {
          alarmNumber: "20061118225464445",
          alarmTitle: "延安高架多车连环相撞",
          alarmDate: "2019.10.10-2019.11.18",
          load: "上海浦东新区666号",
          alarmMan: "接警员1",
          byAlarmMan: "201411041",
          isHandle: "已处理",
        },
        {
          alarmNumber: "20061118225464445",
          alarmTitle: "延安高架多车连环相撞",
          alarmDate: "2019.10.10-2019.11.18",
          load: "上海浦东新区666号",
          alarmMan: "接警员1",
          byAlarmMan: "201411041",
          isHandle: "已处理",
        },
        {
          alarmNumber: "20061118225464445",
          alarmTitle: "延安高架多车连环相撞",
          alarmDate: "2019.10.10-2019.11.18",
          load: "上海浦东新区666号",
          alarmMan: "接警员1",
          byAlarmMan: "201411041",
          isHandle: "已处理",
        },
        {
          alarmNumber: "20061118225464445",
          alarmTitle: "延安高架多车连环相撞",
          alarmDate: "2019.10.10-2019.11.18",
          load: "上海浦东新区666号",
          alarmMan: "接警员1",
          byAlarmMan: "201411041",
          isHandle: "已处理",
        },
        {
          alarmNumber: "20061118225464445",
          alarmTitle: "延安高架多车连环相撞",
          alarmDate: "2019.10.10-2019.11.18",
          load: "上海浦东新区666号",
          alarmMan: "接警员1",
          byAlarmMan: "201411041",
          isHandle: "已处理",
        },
        {
          alarmNumber: "20061118225464445",
          alarmTitle: "延安高架多车连环相撞",
          alarmDate: "2019.10.10-2019.11.18",
          load: "上海浦东新区666号",
          alarmMan: "接警员1",
          byAlarmMan: "201411041",
          isHandle: "已处理",
        },
        {
          alarmNumber: "20061118225464445",
          alarmTitle: "延安高架多车连环相撞",
          alarmDate: "2019.10.10-2019.11.18",
          load: "上海浦东新区666号",
          alarmMan: "接警员1",
          byAlarmMan: "201411041",
          isHandle: "已处理",
        },
        {
          alarmNumber: "20061118225464445",
          alarmTitle: "延安高架多车连环相撞",
          alarmDate: "2019.10.10-2019.11.18",
          load: "上海浦东新区666号",
          alarmMan: "接警员1",
          byAlarmMan: "201411041",
          isHandle: "已处理",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.foot-table {
  min-width: 1050px;
  width: 100%;
  tbody {
    width: 100%;
    tr {
      width: 100%;
      height: 40px;
      margin-bottom: 5px;
      display: block;
      line-height: 40px;
      background-color: #fff;
      border-radius: 4px;
      font-size: 14px;
      color: #333;
      box-shadow: 0px 2px 0px 1px #e3e2ea;
      display: flex;
      justify-content: center;
      text-align: center;
      td:nth-child(1){
        width: 4.5%;
      }
      td:nth-child(10),
      td:nth-child(7),
      td:nth-child(6) {
        width: 9%;
      }
      td:nth-child(5),td:nth-child(4){
        width: 15.25%;
      }
      td:nth-child(3), td:nth-child(2) {
        width: 12.75%;
      }
      td:nth-child(9) {
        width: 6%;
      }
      td:nth-child(8) {
        width: 7.5%;
      }
    }
  }
}
</style>
